<template>
	<div class="cho-tab1 swiper cho1-swiper">
		<ol class="swiper-wrapper">
			<li v-for="(list,i) in pages" :key="i" class="swiper-slide">
				<router-link to="/" v-for="it in list" :key="it.id">
					<img :src="it.imgURL" />
					<aside>
						<h3>{{it.title}}</h3>
						<label>{{it.msg}}</label>
						<p>￥{{it.price}}<em>{{it.oldprice}}</em></p>
					</aside>
				</router-link>
			</li>
		</ol>
		<button>查看更多</button>
	</div>
</template>

<script>
	import {onMounted} from 'vue'
	import Swiper,{
		Autoplay,
		EffectCoverflow,
		EffectCube,
		Pagination
	} from 'swiper'
	Swiper.use([Autoplay,EffectCoverflow,EffectCube,Pagination])
	
	export default{
		name:'ChoiceTab1',
		data(){
			return{
				tab1List : [
					{id:1,imgURL:'imgs/tab1-1.jpg',title:'广州-丽江 7天跟团游',msg:'含往返飞机票+6晚住宿',price:3493,oldprice:3888},
					{id:2,imgURL:'imgs/tab1-2.jpg',title:'广州-稻城亚丁 5天跟团游',msg:'含往返飞机票+4晚住宿',price:5677,oldprice:5888},
					{id:3,imgURL:'imgs/tab1-3.jpg',title:'广州-三亚 5天跟团游',msg:'含往返飞机票(含税)+4晚住宿',price:2500,oldprice:2688},
					{id:4,imgURL:'imgs/tab1-4.jpg',title:'广州-桂林 9天跟团游',msg:'含单程飞机票单程火车票(含税)+8晚住宿',price:3493,oldprice:3888},
					{id:5,imgURL:'imgs/tab1-5.jpg',title:'广州-四川 5天跟团游',msg:'特惠立减！宿国际超5星洲际酒店丨峨眉+乐山+都江堰+熊猫乐园丨赠川剧变脸火锅',price:2320,oldprice:2660},
					{id:6,imgURL:'imgs/tab1-6.jpg',title:'广州-九寨沟 6天跟团游',msg:'自费成都+重庆麻辣双城记|峨眉山+乐山大佛+都江堰洪崖洞|船游夜览两江',price:2980,oldprice:3122},
					{id:7,imgURL:'imgs/tab1-7.jpg',title:'广州-张家界 4天跟团游',msg:'精致小团｜沱江泛舟｜纯玩一价全含｜高档酒店｜张家界玻璃桥天门山玻璃桥凤凰4日',price:2255,oldprice:2668},
					{id:8,imgURL:'imgs/tab1-8.jpg',title:'广州-银川 5天跟团游',msg:'塞上江南+大漠长河+千古绝唱+沙坡头+水洞沟+西夏王陵+北堡西部影城宁夏5日',price:3380,oldprice:4880},
				]
			}
		},
		computed:{
			pages(){//程序当成属性不是函数，，是个变量
				let arr=[]//重组成二维数组
				let num=4
				this.tab1List.forEach((it,i)=>{
					let index=Math.floor(i/num)
					//将计算的页码放入新数组，作为下标
					//判断下标是否已存在
					if (!arr[index]) {
						arr[index]=[]
					}
					arr[index].push(it)	
				})
				return arr
			}
		},
		setup(){
			onMounted(()=>{
				new Swiper('.cho1-swiper',{})
			})
		}
	}
</script>

<style scoped>
	a{
		text-decoration: none;
	}
	.cho-tab1{
		height: 10rem;
	}
	.cho-tab1 ol{
		width: 100%;
		height: 90%;
	}
	.cho-tab1 ol li{
		float: left;
		width: 100%;
		height: 100%;
		display: inline-block;
	}
	.cho-tab1 ol li a{
		width: 48%;
		height: 48%;
		float: left;
		
	}
	.cho-tab1 ol li a:nth-child(even){
		float: right;
	}
	.cho-tab1 ol li a img{
		width: 4rem;
		height: 3rem;
		border-radius: 0.7rem;
		margin: 0.1rem;
	}
	.cho-tab1 ol li a aside{
		font-size: 0.4rem;
		padding-left: 0.25rem;
		width: 98%;
		
	}
	.cho-tab1 ol li a aside h3{
		color: #000000;
		font-size: 0.35rem;
		width: 3.5rem;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}
	.cho-tab1 ol li a aside label{
		color: #808080;
		font-size: 0.35rem;
		width: 3.5rem;
		display: inline-block;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}
	.cho-tab1 ol li a aside p{
		color: #000000;
		font-size: 0.4rem;
		color: #FFA500;
		font-weight: bold;
	}
	.cho-tab1 ol li a aside p em{
		color: #808080;
		padding-left: 0.3rem;
		font-size: 0.3rem;
		font-weight: normal;
		text-decoration: line-through;
	}
	.cho-tab1 button{
		width: 100%;
		height: 10%;
		background: white;
		border: 0.01rem solid gainsboro;
		border-radius: 0.3rem;
	}
</style>
